import React, { Component } from 'react'

import './time.less'
class Timer extends Component {

    state = {

    };

    componentDidMount() {
        let warp = this._warp;
        // 获取遮罩层
        let cover = this._cover;
        // 获取容器的相关属性
        let _this = warp.getBoundingClientRect();
        let w = _this.width
        let h = _this.height
        let offsetLeft = _this.left
        let offsetTop = _this.top
        // 定义一个方向的数组
        let dirName = new Array('top', 'right', 'bottom', 'left');

        this.setState({
            warp, cover, w, h, offsetLeft, offsetTop, dirName
        })
    }
    onMouseEnter = (e) => {
        let { warp, cover, w, h, offsetLeft, offsetTop, dirName } = this.state;
        let x = (e.pageX - offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
        let y = (e.pageY - offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
        // 用来获取移入的方位
        // 通过Math.atan2 计算角度 https://www.jianshu.com/p/9817e267925a
        let direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
        let dirText = dirName[direction];
        // 通过移入方位，添加移入动画class
        switch (dirText) {
            case 'top':
                cover.setAttribute("class", "cover topEnter");
                break;
            case 'right':
                cover.setAttribute("class", "cover rightEnter");
                break;
            case 'bottom':
                cover.setAttribute("class", "cover bottomEnter");
                break;
            case 'left':
                cover.setAttribute("class", "cover leftEnter");
                break;
            default:
                break;
        }
    }
    onMouseLeave = (e) => {
        let { cover, w, h, offsetLeft, offsetTop, dirName } = this.state;
        let x = (e.pageX - offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
        let y = (e.pageY - offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
        // 用来获取移入的方位
        // 通过Math.atan2 计算角度 https://www.jianshu.com/p/9817e267925a
        let direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
        let dirText = dirName[direction];
        // 通过移入方位，添加移出动画class
        switch (dirText) {
            case 'top':
                cover.setAttribute("class", "cover topLeave");
                break;
            case 'right':
                cover.setAttribute("class", "cover rightLeave");
                break;
            case 'bottom':
                cover.setAttribute("class", "cover bottomLeave");
                break;
            case 'left':
                cover.setAttribute("class", "cover leftLeave");
                break;
            default:
                break;
        }
    }

    render() {
        const { width = "", height = "", background = "", coverBackground = "", coverContent = "" } = this.props;
        return (
            <>
                <div style={{
                    width: `${width || 150}px`,
                    height: `${height || 150}px`,
                    background: background || "#e91e63"
                }}
                    className="mouse-warp" ref={warp => this._warp = warp} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                    <div className="content">
                        {this.props.children}
                    </div>
                    <div style={{
                        background: coverBackground || "rgba(0, 0, 0, 0.397)"
                    }}
                        className="cover" ref={cover => this._cover = cover}>
                        {coverContent}
                    </div>
                </div>
            </>
        );
    }
}

export default Timer